<template>
  <div class="page page-role">
    <c-content :pagination="false">
      <!-- 查询 -->
      <el-form slot="search" :inline="true" class="search-form" label-width="80px" @submit.native.prevent>
        <el-form-item class="search-btn">
          <el-button v-waves type="primary" @click="openXM" size="mini">新增</el-button>
        </el-form-item>
      </el-form>
      <!-- 展示 -->
      <el-table
          slot="table"
          ref="multipleTable"
          v-loading="tab_loading"
          width="100%"
          border
          :data="dataList"
          class="expand--table">
        <el-table-column align="center" label="重要程度">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.importanceRank == 0" size="mini" type="">次重要的 </el-tag>
            <el-tag v-if="scope.row.importanceRank == 1" size="mini" type="">略重要的</el-tag>
            <el-tag v-if="scope.row.importanceRank == 2" size="mini" type="success">重要的</el-tag>
            <el-tag v-if="scope.row.importanceRank == 3" size="mini" type="warning">很重要的</el-tag>
            <el-tag v-if="scope.row.importanceRank == 4" size="mini" type="danger">关键的</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="cp" label="cp目标" />
        <el-table-column align="center" prop="cpk" label="cpk目标" />
        <el-table-column align="center" prop="createTime" label="添加时间" />
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <c-button>
              <span @click="openXM(scope.row)">编辑</span>
              <span @click="handleDel(scope.row)" class="danger">删除</span>
            </c-button>
          </template>
        </el-table-column>
      </el-table>
    </c-content>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getCpConfigs, deleteCpConfigs } from '@/api/xapi'
import AddEdit from './XM/AddEditTargetSet'
export default {
  components: {
    CContent: () => import('@/components/CContent'),
    CButton: () => import('@/components/CButton')
  },
  computed: {
    ...mapGetters(['btn_permission'])
  },
  props: {
    layerid: {
      default: 0
    }
  },
  data() {
    return {
      tab_loading: false,
      form: {},
      dataList: []
    }
  },
  created() {
    this.$getReset();
     this.getList();
  },
  methods: {
    /* 查询 */
    async getList() {
      const obj = JSON.parse(JSON.stringify(this.form))
      this.tab_loading = true
      const { data } = await getCpConfigs(obj)
      this.tab_loading = false
      this.dataList = data
    },
    /* 删除 */
    handleDel(row) {
      this.$confirm('确认删除此信息?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await deleteCpConfigs(row.id)
         if (res.status == 200) {
            this.$message({ message: '删除成功', type: 'success' })
            this.getList()
         }
      }).catch(() => {
      })
    },
    /* 添加和编辑 */
    openXM(row) {
      this.$layer.iframe({
        shadeClose:false,
        content: {
          content: AddEdit,
          parent: this,
          data: { row: row }
        },
        maxmin: true,
        area: ['600px', '500px'],
        title: row.id ? '编辑cp配置' : '添加cp配置'
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

